<template>
  <div>
    <div class="ConsoleCardStyle">

      <div class="ConsoleCardTop">
        <p>店铺及商品提示</p>
        <span>店铺及商品提示</span>
      </div>

      <div class="ConsoleCardBottom">
        <div class="ConsoleCardBottomContent"  v-for="(formDataTwoItem , index) in formDataTwo.goods" :key="index">
          <p>{{ formDataTwoItem.label }}</p>
          <p>{{ formDataTwoItem.value }}</p>
        </div>
      </div>

    </div>

    <div class="ConsoleCardStyle">

      <div class="ConsoleCardTop">
        <p>交易提示</p>
        <span>需要立即处理的交易核定单</span>
      </div>

      <div class="ConsoleCardBottom">
        <div class="ConsoleCardBottomContent"  v-for="(formDataTwoItem , index) in formDataTwo.order" :key="index">
          <p>{{ formDataTwoItem.label }}</p>
          <p>{{ formDataTwoItem.value }}</p>
        </div>
      </div>

    </div>




  </div>
</template>

<script setup>
import { getStatisticsTwoApi } from '@/api/console/ConsoleApi';
import { onMounted, reactive } from 'vue';

onMounted(() => {
  OnStatisticsTwoData()
})

const dataOneTop = reactive(
  [
    {
      title:'店铺及商品提示',
      textColor:'店铺及商品提示'
    },
    {
      title:'交易提示',
      textColor:'需要立即处理的交易核定单'
    }
  ]
)

const formDataTwo = reactive({
  "goods": [],
	"order": []
})

// 获取token存储到对象中
const UserToken = localStorage.getItem('user-token'); 
const TokenData = reactive({
	token:UserToken
})

// 后台首页统计 1 的数据
const OnStatisticsTwoData = async () => {
	const { data } = await getStatisticsTwoApi(TokenData)
	formDataTwo.goods = data.goods
  formDataTwo.order = data.order
}

</script>

<style lang="scss" scoped>
.ConsoleCardStyle{
  width: 680px;
  height: 150px;
  background-color: #ffffff;
  padding: 10px ;
  margin-bottom: 10px;

  .ConsoleCardTop{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f6f6f6;

    span{
      color: red;
      border: 1px solid red;
      padding: 5px;
      border-radius: 5px;
    }

  }

  .ConsoleCardBottom{
    display: flex;
    justify-content: space-between;
    margin-top: 15px ;

    .ConsoleCardBottomContent{
      width: 150px;
      height: 100px;
      background-color: #f6f6f6;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

  }

}
</style>